<template>
  <div style="position: relative;display: inline-block;">
    <el-input
    :clearable="$attrs['clearable']"
        :value="computedValue"
        @click.native="clickevent"
        :disabled="$attrs['disabled']"
        :placeholder="$attrs['placeholder']||'目标周'"
        style="width:100%;"
        @change="_value=>{
         if(!_value){
            this.targetTimeStart=''
             this.targetTimeEnd=''
              $emit('update:props_targetTimeStart',this.targetTimeStart)
                $emit('update:props_targetTimeEnd',this.targetTimeEnd)
                 $emit('change')
         }
        }"
    />
    <el-date-picker
        style="opacity:0;position:absolute;left:0px;width:0px;height:25px;"
        ref="weekdatetimeref"
        v-model="dateweek"
        type="week"
        placeholder="目标周"
        :clearable="$attrs['clearable']"
        :disabled="$attrs['disabled']"
        :picker-options="{
          firstDayOfWeek:1
        }"
        @change="(_value)=>{
          var self=this;
                           var _startime=dateFormatYYYYMMDDHHmmss(moment(_value).clone().add(-1,'d'))
                              var _endtime=dateFormatYYYYMMDDHHmmss(moment(_startime).clone().add(6,'d'))
                              if(!_startime){
                                    targetTimeStart=_startime
                                   targetTimeEnd=_endtime
                                   applyTimeArray=[]
                              }else{
                                   targetTimeStart=dateFormatYYYYMMDDHHmmss(   moment( _startime ) .startOf('d')  )
                                   targetTimeEnd=dateFormatYYYYMMDDHHmmss( moment(_endtime) .endOf('d') )

                              }
                $emit('update:props_targetTimeStart',this.targetTimeStart)
                $emit('update:props_targetTimeEnd',this.targetTimeEnd)
                 $emit('change',{
                    startTime:this.targetTimeStart,
                        endTime:this.targetTimeEnd
                 })
          }"
    ></el-date-picker>
  </div>
</template>
<script>
import { dateFormatMMDD, dateFormatYYYYMMDD, dateFormatYYYYMMDDHHmmss } from '@/utils'
import moment from 'moment'
export default {
  data() {
    return {
      moment:moment,
      dateFormatYYYYMMDDHHmmss,
      dateweek: '',
      targetTimeStart: this.$props.props_targetTimeStart||'',
      targetTimeEnd: this.$props.props_targetTimeEnd||'',
      applyTimeArray: []
    }
  },
  computed: {
    computedValue() {
      var str = ''
      if (dateFormatYYYYMMDD(this.targetTimeStart)) {
        str = str + dateFormatYYYYMMDD(this.targetTimeStart)
      }
      if (dateFormatYYYYMMDD(this.targetTimeEnd)) {
        str =str+ `  -  ${dateFormatMMDD(this.targetTimeEnd)}`
      }
      return str
    }
  },
  props: {
    props_targetTimeStart:{
      type:[String]
    },
    props_targetTimeEnd:{
      type:[String]
    }
  },
  watch: {
    '$props.props_targetTimeStart'(_value){
      this.targetTimeStart=_value
    },
    '$props.props_targetTimeEnd'(_value){
      this.targetTimeEnd=_value
    }
  },
  methods: {
    clickevent() {
      var self = this
      // debugger
      self.$refs?.weekdatetimeref?.showPicker?.()
      self.$refs?.weekdatetimeref?.handleOpen?.()


      if(!self.dateweek){
        self.dateweek=dateFormatYYYYMMDDHHmmss(moment(this.targetTimeStart).clone().add(1,'d'))
      }
    },

  }
}
</script>
